<template>
  <el-select
    v-model="selectedValue"
    v-bind="$attrs"
    :style="{ width: width }"
    :placeholder="placeholder"
    @change="handleChange"
  >
    <el-option
      v-for="(val, key) in list"
      :key="key"
      :label="handleLabel(key, val)"
      :value="key"
    />
  </el-select>
</template>

<script>
import { handleDict } from '@/api/ft'

export default {
  // 当前页面名称（组件）
  name: 'FtDictSelect',
  // 引用组件
  components: { },
  directives: { },
  filters: {},
  // props属性 这里只定义了基本的，目的是防止用户传递无效的属性（如错误拼写），其他的el-select的属性会默认继承，用法一样，因为使用v-bind="$attrs"，这个会将非props定义的属性继承过来
  props: {
    value: {
      type: String,
      default: undefined
    },
    queryForm: {
      type: Boolean,
      default: false
    },
    // 字典类型
    dictType: {
      type: String,
      require: true,
      default: undefined
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    // 是否显示码值
    showCode: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '207px'
    }
  },
  data() {
    return {
      // 选中值
      selectedValue: this.value,
      list: []
    }
  },
  computed: {},
  watch: {
    value(val) {
      this.selectedValue = val
    },
    selectedValue(val) {
      this.$emit('input', val)
    }
  },
  created() {},
  mounted() {
    this.handleInit()
  },
  methods: {
    async handleInit() {
      handleDict({ type: this.dictType }).then(res => {
        if (res.data) {
          this.list = res.data
        }
      })
    },
    handleLabel(key, value) {
      return this.showCode ? [key, '-', value].join(' ') : value
    },
    handleChange(value) {
      if (this.queryForm) {
        this.$emit('change', value)
      } else {
        // 获取选中项的label
        const selectedLabel = this.list[value] || ''
        // 同时返回value和label
        this.$emit('change', { value, label: selectedLabel })
      }
    }
  }
}
</script>
